<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:c="http://xmlns.jcp.org/jsf/composite"
	xmlns:p="http://primefaces.org/ui">

<ui:decorate template="/jsp/WEB/pageLayout.xhtml">
	<ui:define name="centro">

		<style>
.alignTop td {
	vertical-align: top;
}

.customTxtWidth200px .ui-inputfield .ui-inputtext .ui-widget {
	width: 200px !important;
}
</style>


		<h:form id="form">
			<p:growl id="msgs" showDetail="true" />

			<p:panel header="Cadastro de Categorias">
				<f:facet name="actions">
					<h:commandLink
						styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default" title="Ajuda"
						onclick="dlg.show(); return false;">
						<h:outputText styleClass="ui-icon ui-icon-help" />
					</h:commandLink>
				</f:facet>

				<p:dialog header="Ajuda" widgetVar="dlg">
					<h:outputText value="#{categoryBean.help}" escape="false" />
				</p:dialog>


				<h:panelGrid columns="2" cellpadding="5"
					styleClass="top-aligned-columns">

					<p:tree value="#{categoryBean.root}" var="node" dynamic="false"
						selectionMode="single" expandAnim="FADE_IN"
						collapseAnim="FADE_OUT" selection="#{categoryBean.selectedNode}">
						<p:treeNode>
							<h:outputText value="#{node.getDescription()}" />
						</p:treeNode>
					</p:tree>

					<h:panelGrid columns="2" cellpadding="5"
						columnClasses="alignTop,alignTop">

						<p:outputLabel for="txtCategory" value="Nome: " />
						<p:inputText id="txtCategory" value="#{categoryBean.menuNewName}"
							styleClass="customTxtWidth200px" />
					</h:panelGrid>

				</h:panelGrid>

				<p:separator />

				<p:commandButton value="Adicionar" update="@form"
					action="#{categoryBean.menuAdd()}" icon="ui-icon-plusthick">
				</p:commandButton>
				<p:commandButton value="Excluir" update="@form"
					action="#{categoryBean.menuDelete()}" icon="ui-icon-minus">
				</p:commandButton>
				<p:commandButton value="Atualizar" update="@form" 
					action="#{categoryBean.menuUpdate()}" icon="ui-icon-disk">
				</p:commandButton>
				<p:commandButton value="Limpar" update="@form"
					action="#{categoryBean.menuClear()}" icon="ui-icon-document"
					resetValues="true">
				</p:commandButton>
			</p:panel>
		</h:form>
	</ui:define>
</ui:decorate>
</html>
